<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>Document</title>
		<style type="text/css">
			#main {
				display: flex;
			}

			#nav {
				flex: 0 0 200px;
			}

			#bdnav {
				list-style: none;
				margin: 0;
				padding: 10px;
			}
			#btn{
				width: 200px;
				height: 50px;
				font-size: 32px;
			}
		</style>
		<link rel="stylesheet" type="text/css" href="building-0.css" />
		<script src="buildingsInfo.js"></script>
		<script src="buildingsMap.js"></script>
		<script src="dom-to-image.min.js"></script>
	</head>
	<body>
		<button type="button" id="btn" title="下载当前楼宇布局图片">下载图片</button>
		<div id="main">
			<div id="nav">
				<ul id="bdnav">
					<li>
						<div>行政楼</div>
						<ol>
							<li class="bdlist" data="A|C|D|F">行政楼ACDF</li>
							<li class="bdlist" data="A">行政楼A</li>
							<li class="bdlist" data="C">行政楼C</li>
							<li class="bdlist" data="D">行政楼D</li>
							<li class="bdlist" data="F">行政楼F</li>
						</ol>
					</li>
					<li>
						<div>实验楼</div>
						<ol>
							<li class="bdlist" data="S1">实验楼S1</li>
							<li class="bdlist" data="S2">实验楼S2</li>
							<li class="bdlist" data="S3">实验楼S3</li>
							<li class="bdlist" data="S4">实验楼S4</li>
							<li class="bdlist" data="S5">实验楼S5</li>
							<li class="bdlist" data="S6">实验楼S6</li>
							<li class="bdlist" data="S5|S3|S1">实验楼S1|S3|S5</li>
							<li class="bdlist" data="S6|S4|S2">实验楼S2|S4|S6</li>
						</ol>
					</li>
					<li>
						<div>双创综合楼</div>
						<ol>
							<li class="bdlist" data="S7C|S7Z|S7T">实验楼S7</li>
							<li class="bdlist" data="S7C">双创综合楼S7C</li>
							<li class="bdlist" data="S7Z">双创综合楼S7Z</li>
							<li class="bdlist" data="S7T">双创综合楼S7T</li>
						</ol>
					</li>
				</ul>
			</div>
			<div id="buildings"> </div>
		</div>
		<script type="text/javascript">
			var bds_div = document.getElementById('buildings');
			var newbd = new buildingsMap(bds_div);
			newbd.setBds('a').setInfo();
			//html转图片按钮事件--------------------------
			btn.onclick = function(e) {
				let dom = document.querySelector('#buildings');
				let abc = dom.querySelector('div').id;
				domtoimage.toJpeg(dom, { scale: 2, bgcolor: '#fff' }).then(res => {
					// domtoimage.toPng(dom, { scale: 4 }).then(res => {
					let alink = document.createElement('a');
					alink.download = abc + '楼平面图下载';
					alink.href = res;
					alink.click();
				});
			};
			//显示各个楼宇布局-------------------------------
			bdnav = document.getElementById('bdnav');
			bdnav.onclick = ev => {
				if (ev.target.tagName != 'LI') return;
				div = ev.target;
				data = div.getAttribute('data');
				title = div.innerText;
				bds_div.innerHTML = '';
				newbd.setBds(data).setInfo();
			};
		</script>
	</body>
</html>
